<%@ page language="java" pageEncoding="utf-8"%>
<%
String baseUrl = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<!DOCTYPE html>
<html>
<base href="<%=baseUrl%>"/>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="static_front/css/bootstrap.min.css">
	<title>用户注册</title>
</head>


<div class="container" style="margin-top: 50px">
	<div class="row center" style="margin-bottom: 50px">
		<div class="col-md-12 text-center"><h1>用户注册</h1></div>
	</div>
	<div class="row">
		<div class="col-md-3"></div>
		<div class="col-md-6">
			<form action="reg" method="post">
				<div class="form-group row">
					<label class="col-md-2">用户名</label>
					<div class="col-md-5">		
						<input type="text" name="username" class="form-control">
					</div>
					<span id="msgUsername"></span>
				</div>
				<div class="form-group row">
					<label class="col-md-2">邮箱</label>
					<div class="col-md-5">		
						<input type="text" name="email" class="form-control">
					</div>
					<span id="msgUsername"></span>
				</div>
				<div class="form-group row">
					<label class="col-md-2">性别</label>
					<div class="col-md-10">		
						<div class="form-check form-check-inline">
						  <input class="form-check-input" name="sex" type="radio" value="男">
						  <label class="form-check-label">男</label>
						</div>
						<div class="form-check form-check-inline">
						  <input class="form-check-input" name="sex" type="radio" value="女">
						  <label class="form-check-label">女</label>
						</div>
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2">生日</label>
					<div class="col-md-5">		
						<input type="text" name="birth" class="form-control" value="1990-12-01">
					</div>
					<span id="msgUsername"></span>
				</div>
				<div class="form-group row">
					<label class="col-md-2 col-form-label">星座</label>
					<div class="col-md-5">		
						<select name="astro" class="form-control">
							<option>--请选择你的星座--</option>
							<option value="白羊座">白羊座</option>
							<option value="金牛座">金牛座</option>
							<option value="双鱼座">双鱼座</option>
						</select>
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2">爱好</label>
					<div class="col-md-10">		
						<div class="form-check form-check-inline">
						  <input class="form-check-input" type="checkbox" value="音乐" name="hobbies">
						  <label class="form-check-label">音乐</label>
						</div>
						<div class="form-check form-check-inline">
						  <input class="form-check-input" type="checkbox" value="阅读" name="hobbies">
						  <label class="form-check-label">阅读</label>
						</div>
						<div class="form-check form-check-inline">
						  <input class="form-check-input" type="checkbox" value="滑雪" name="hobbies">
						  <label class="form-check-label">滑雪</label>
						</div>
					</div>
				</div>
				<div class="form-group row">
					<label class="col-md-2"></label>
					<div class="col-md-10">
						<input type="hidden" name="action" value="reg"/>
						<input type="submit" value="注册" name="submit" class="btn btn-danger">
						<a href="login.jsp?id=123&name=hary pota">登录</a>
					</div>
				</div>
			</form>
		</div>
		<div class="col-md-3"></div>
	</div>

</div>

<script type="text/javascript" src="static_front/js/jquery.min.js"></script>
<script type="text/javascript" src="static_front/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function(){
		//用户名唯一性校验
		$('input[name=username]').blur(function() {
			
			var username = $('input[name=username]').val();
			$.get('checkAccount', {action:"checkAccount", account:username, accountType:"username"}, function(data){
				var obj = data;
				//var obj = JSON.parse(data);//把后端的json串-》json对象
				if(obj.code==-1){//已经注册
					$('#msgUsername').removeClass('text-success');
					$('#msgUsername').addClass('text-danger');
				} else {//没有人注册
					$('#msgUsername').removeClass('text-danger');
					$('#msgUsername').addClass('text-success');
				}
				$('#msgUsername').html(obj.msg);
			});
			
		})	
	})
</script>